<template>
	<view class="newsSearch">
		<uni-search-bar @confirm="searchtm" :focus="true" v-model="data.searchValue" @blur="blur" @focus="focus" @input="input"
			@cancel="cancel"  radius="30" >
		</uni-search-bar>
		<view class="search" v-if="data.popularList.length>0">
			<text class="searchText">历史搜索</text>
			<view class="searMiss">
				<view class="prpular" v-for="(news,indexs) in data.popularList" :key="indexs" @click="prpular(news)">
					<text class="prpularText">{{news}}</text>
				</view>
			</view>
		</view>
		<view class="search" v-if="data.resoulist.length>0">
			<text class="searchText">热门搜索</text>
			<view class="searMiss">
				<view class="prpular" v-for="(news,indexs) in data.resoulist" :key="indexs" @click="prpular(news.name)">
					<text class="prpularText">{{news.name}}</text>
				</view>
			</view>
		</view>
	</view>
</template>

<script setup>
	import {ref,reactive,getCurrentInstance} from "vue";
	import {onLoad,onShow} from "@dcloudio/uni-app";
	const {proxy} = getCurrentInstance();
	let data = reactive({
		popularList:[],
		searchValue:'',
		resoulist:[]
	})
	onLoad(() => {
		
	})
	onShow(() => {
		console.log('页面onShow',data.searchValue)
		data.popularList=uni.getStorageSync('popularListss')?uni.getStorageSync('popularListss'):[],
		resou()
	})
	function resou(){
		proxy.$request({
			url: `api/hotSearchList/?code=1&page=1&size=6`,
			method: 'get',
			success(res) {
				console.log(res)
				data.resoulist=res.data.data
			}
		})
	}
	// 搜索取消按钮
	function cancel(res){
		console.log(res);
	}
	// 搜索
	function searchtm(res) {
		// console.log(res,'45454');
		data.popularList.unshift(res.value)
		data.popularList=data.popularList.splice(0,6)
		data.popularList=Array.from(new Set(data.popularList))
		uni.setStorageSync('popularListss',data.popularList)
		uni.navigateTo({
			url:'/pages/news/newlist?keyword='+res.value
		})
	}
	function prpular(news){
		data.searchValue = news
		data.popularList.unshift(news)
		data.popularList=data.popularList.splice(0,6)
		data.popularList=Array.from(new Set(data.popularList))
		uni.setStorageSync('popularListss',data.popularList)
		proxy.$goURl('/pages/news/newlist?keyword='+news)
	}
	function blur(res){

	}
	function focus(res){
		console.log(res,'2')
	}
	function input(res){
		console.log(res,'3')
	}
	
</script>

<style lang="scss" scoped>
	page{
		background: #fff;
	}
	.search{
		width: 94%;
		margin: 0 auto;
		.searchText{
			font-size: 36rpx;
			font-family: PingFang SC, PingFang SC-Bold;
			font-weight: 700;
			text-align: left;
			color: #333333;
			letter-spacing: 1rpx;
		}
		.searMiss{
			display: flex;
			flex-direction: row;
			flex-wrap: wrap;
			margin-top: 20rpx;
		}
		.prpular{
			background: #ffffff;
			border: 2rpx solid #d6d6d6;
			border-radius: 30rpx;
			display: flex;
			justify-content: center;
			align-items: center;
			padding: 8rpx 24rpx;
			margin: 0 20rpx 20rpx 0;
		}
		.prpularText{
			font-size: 24rpx;
			font-family: PingFang SC, PingFang SC-Regular;
			font-weight: 400;
			text-align: left;
			color: #999999;
			letter-spacing: 1rpx;
		}
	}
</style>
<style>
	page{
		background-color: #fff;
	}
</style>